Show:

Q clickable Class

Defined in: platform/plugins/Q/web/js/fn/clickable.js:8
Module: Q-tools

Adds a cool "popping" effect to a clickable element when you press it, which especially looks nice on touchscreens. I originally came up with this effect at Intermagix.

Constructor

Q clickable

(
  • [options]
  • [option.press.ease=Q.Animation.ease.linear]
)

Defined in platform/plugins/Q/web/js/fn/clickable.js:8

Parameters:

  • [options] Object optional

    options for function configuration

    • [className] String optional

      any CSS classes to add to the container element

    • [shadow] Object | Null optional

      shadow effect configuration, or false for no shadow

      • [src="{{Q}}/img/shadow3d.png"] String optional
        url of the shadow image
      • [stretch=1.5] Number optional
        stretch
      • [dip=0.25] Number optional
        dip
      • [opacity=0.5] Number optional
        opacity
    • [press] Object optional

      press

      • [duration=100] Number optional
        duration
      • [size=0.85] Number optional
        size
      • [opacity=1] Number optional
        opacity
    • [release] Object optional

      release

      • [duration=75] Number optional
        duration
      • [size=1.3] Number optional
        size
      • [opacity=0.5] Number optional
        opacity
      • [ease=Q.Animation.ease.smooth] Q.Animation.ease optional
        ease
    • [snapback] Object optional

      snapback

      • [duration=75] Number optional
        duration
      • [ease=Q.Animation.ease.smooth] Q.Animation.ease optional
    • [center] Object optional

      center

    • [selectable=false] Boolean optional
    • [triggers=null] Boolean optional

      A jquery selector or jquery of additional elements to trigger the clickable

    • [onPress] Q.Event optional

      onPress occurs after the user begins a click or tap.

    • [onRelease] Q.Event optional

      onRelease occurs after the user ends the click or tap. This event receives parameters (event, overElement)

    • [afterRelease] Q.Event optional

      afterRelease occurs after the user ends the click or tap and the release animation completed. This event receives parameters (evt, overElement)

    • [cancelDistance=15] Number optional

      cancelDistance

  • [option.press.ease=Q.Animation.ease.linear] Q.Animation.ease optional

    ease

Item Index